/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="resource">
        <lang class="resource__title">我的资源</lang>
        <div class="resource__tabs">
            <span :class="[activeNo ===1?'active':'']" @click="active(1)"> <img
                :src="zygl"> {{ _('资源概况') }}</span>
            <span :class="[activeNo ===2?'active':'']" @click="active(2)"> <img
                :src="sjkj" alt="icon"> {{ _('数据空间') }}</span>
        </div>
        <div class="resource__body">
            <template v-if="activeNo===1">
                <div class="resource__card">
                    <lang class="resource-card__title"> 已分配/总容量</lang>
                    <div v-if="chartsData.length !== 0" class="card__content">
                        <div v-for="item in chartsData" :key="item.id" class="card__item">
                            <span>{{ item.title }}</span>
                            <span>
                                <span v-if="showAllocatedAlert(item)" v-qtip="_('可分配资源不足')"
                                      class="sf-comp-iconfont iconfont iconwin-alert"></span>
                                {{ item.allocated }}/{{ (item.total) }}{{ item.unit }}
                            </span>
                        </div>
                    </div>
                    <no-data v-else></no-data>
                </div>
            </template>
            <template v-else>
                <div class="resource__card">
                    <template v-if="dataSpaceIsEmpty">
                        <div class="resource-dataSpace--empty">
                            <i class="sf-comp-iconfont  icon-comp-empty-status empty-icon"></i>
                            <p>
                                暂未被分配数据空间容量
                            </p>
                            <p>
                                可联系管理员开通权限
                            </p>
                        </div>
                    </template>
                    <template v-else>
                        <div class="resource-dataSpace">
                            <p class="dataSpace-title">{{ dataSpace.dataSpaceName }}</p>
                            <div class="dataSpace-total">
                                <lang class="dataSpace-total__text"> 总容量：{{ dataSpace.totalCapacity }}G</lang>
                                <span v-if="dataFull"
                                      v-qtip="_('已到达上限')"
                                      class="sf-comp-iconfont iconfont iconwin-alert"> {{ _('已到达上限') }} </span>
                            </div>
                            <sf-progress-bar :default-width="280"
                                             :default-height="16"
                                             class="resource-dataSpace__bar"
                                             :value="used"
                                             back-color="#EDEFF2"
                                             front-color="#FF933B"
                                             :text-hidden="true"/>
                            <div class="dataSpace-used">
                                <lang>已使用{{ dataSpace.usedCapacity }}/{{ dataSpace.totalCapacity }}G</lang>
                                <lang>剩余{{ dataSpace.remainingCapacity }}G</lang>
                            </div>
                            <div class="dataSpace-dataset">
                                <div style="display: flex; align-items: center">
                                    <img src="./img/shujujiguanli.svg" alt="shujujiguanli">
                                    <lang class="dataSpace-dataset__label">数据集存入:</lang>
                                </div>
                                <lang
                                    :class="[Number(dataSpace.datasetUsed) >= Number(dataSpace.datasetCapacity)?
                                    'dataSpace-dataset__number dataSpace-dataset--fill':'dataSpace-dataset__number']">
                                    {{ dataSpace.datasetUsed }}/{{ dataSpace.datasetCapacity }}个
                                </lang>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>

<style scoped lang="less">
.resource {
    flex: 1;
    margin-right: 40px;
    height: 350px;
    background-color: #FFFFFF;
    padding: 16px 20px;
    border-radius:6px;
    &__title {
        font-size: 16px;
        font-weight: 600;
    }

    &__tabs {
        margin-top: 16px;
        padding: 4px;
        background-color: #f0f0f0;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;

        span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 136px;
            height: 32px;
            line-height: 32px;
            background-color: #F0F0F0;
            color: #564C4E;
            cursor: pointer;
            border-radius: 5px;
        }

        img {
            margin-right: 5px;;
        }

        .active {
            background-color: #2C2A2A;
            color: #FFFFFF;
        }
    }

    &__card {
        margin-top: 20px;

        .resource-card__title {
            float: right;
            color: #564C4E;
        }

        .card__content {
            padding-top: 20px;

            .card__item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #564C4E;
                background-color: #F7F7F7;
                height: 30px;
                margin: 20px 0;
                padding: 0 20px;
                border-radius: 4px;
                .iconfont {
                    font-size: 14px;
                    margin-right: 3px;
                    color: orange;
                }

            }
        }

        .resource-dataSpace--empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 60px;

            .empty-icon {
                color: #dfeaff;
                font-size: 90px;
            }

            p {
                color: #989898;
            }
        }

        .resource-dataSpace {
            .dataSpace-title {
                color: #3D3D3D;
                height: 17px;
                line-height: 17px;
                font-size: 14px;
                display: block;
            }

            .dataSpace-total {
                display: flex;
                justify-content: space-between;

                .iconfont {
                    font-size: 12px;
                    color: #FF6526;
                }

                &__text {
                    color: #9B9B9B;
                    height: 17px;
                    line-height: 17px;
                    margin-bottom: 10px;
                    display: block;
                }
            }

            .dataSpace-used {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                color: #80848F;
            }

            .dataSpace-dataset {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 60px;
                background-color: #F7F7F7;
                margin-top: 40px;
                padding: 0 18px;

                &__label {
                    margin-left: 16px;
                    color: #564C4E;
                }

                &__number {
                    color: #564C4E;
                }

                &--fill {
                    color: #FF6526;
                }

            }


        }

        .resource-dataSpace__bar {
            /deep/ .sfv-progress-bar_inner {
                border-radius: 20px !important;

                .sfv-progress-bar_bg {
                    border: none;
                }
            }
        }
    }
}
</style>


<script>
import NoData from 'src/components/nodata';
import sjkj from './img/shujukongjian.svg'
import sjkj2 from './img/shujukongjian-w.svg'
import zygl from './img/ziyuangaikuang.svg'
import zygl2 from './img/ziyuangaikuang-w.svg'
import store from 'src/vuex/store';

let userID = store.state.userId;

export default {
    name: "MyResource",
    components: {
        NoData,
    },
    data() {
        return {
            activeNo: 1,
            chartsData: [],
            dataSpaceIsEmpty: true,
            dataSpace: {}
        }
    },
    computed: {
        sjkj() {
            return this.activeNo === 1 ? sjkj : sjkj2
        },
        zygl() {
            return this.activeNo === 2 ? zygl : zygl2
        },
        used() {
            const usedCapacity = this.dataSpace.usedCapacity;
            const totalCapacity = this.dataSpace.totalCapacity
            return (usedCapacity / totalCapacity).toFixed(2)
        },
        dataFull() {
            return (Number(this.dataSpace.datasetUsed) >= Number(this.dataSpace.datasetCapacity)) || this.dataSpace.remainingCapacity === '0.0'
        }

    },
    mounted() {
        this.initDataSpace()
    },
    methods: {
        async initDataSpace() {
            const res = await this.$ajax.get(`/ai-datalake/api/v1/dataspace/${userID}/resource`)
            let {success, data} = res;
            if (!success || data.totalCapacity === '0') {
                this.dataSpaceIsEmpty = true;
                return;
            }
            this.dataSpaceIsEmpty = false;
            this.dataSpace = data;
        },
        active(no) {
            this.activeNo = no;
        },

        setData(data) {
            this.chartsData = data;
        },
        showAllocatedAlert(data) {
            let noAllocatedPercent = 100 - data.allocatedPercent;
            return noAllocatedPercent < 10;
        },
    }
}
</script>

